//  组件式调用redux
import React from 'react'
import styles from './Header.module.css'
import logo from '../../assets/logo.svg'
import { GlobalOutlined } from '@ant-design/icons'
import { Layout, Typography, Input, Menu, Button, Dropdown } from 'antd';
import { menuList } from './setting'
import { withRouter, RouteComponentProps} from 'react-router-dom'
import store, { RootState } from '../../redux/store'
import { withTranslation, WithTranslation } from "react-i18next";
import { addLanguageActionCreator, changeLanguageActionCreator } from '../../redux/language/languageActions'
import { connect } from 'react-redux'
import { Dispatch } from 'redux'

const mapStateToProps = (state: RootState) => {
  return {
    language: state.language.language,
    languageList: state.language.languageList,
  }
}

const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    changeLanguage: (code: 'zh'| 'en') => {
      const action = changeLanguageActionCreator(code)
      dispatch(action)
    },
    addLanguage: (name: string, code: string) => {
      const action = addLanguageActionCreator(name, code);
      dispatch(action);
    },
  }
}

type PropsType = RouteComponentProps & // react-router 路由props类型
                 WithTranslation &  // i18n props类型
                 ReturnType<typeof mapStateToProps> & // redux store 映射类型
                 ReturnType<typeof mapDispatchToProps> // redux dispatch 映射类型
class HeaderComponent extends React.Component<PropsType> {
  constructor(porps) {
    super(porps);
    const storeState = store.getState()
    this.state = {
      language: storeState.language.language,
      languageList: storeState.language.languageList
    }
    store.subscribe(this.handleStoreChange) // 订阅
  }

  handleStoreChange = () => {
    const storeState = store.getState()
    this.setState({language: storeState.language})
  }
  menuClickHandler = (e) => {
    if(e.key === "new") {
      this.props.addLanguage("新语言", "new_lang");
    } else {
      this.props.changeLanguage(e.key)
    }
  };

  render() {
    const { history, t } = this.props
    return (
      <div className={styles["app-header"]}>
        {/* top header */}
        <div className={styles["top-header"]}>
          <div className={styles.inner}>
            <Typography.Text>{t("header.slogan")}</Typography.Text>
            <Dropdown.Button style={{marginLeft: 15}} overlay={
              <Menu onClick={this.menuClickHandler}>
                {
                  this.props.languageList.map(item => (
                    <Menu.Item key={item.code}>{ item.name }</Menu.Item>
                  ))
                }
                <Menu.Item key={"new"}>{t("header.add_new_language")}</Menu.Item>
              </Menu>
            }
            icon={<GlobalOutlined/>}
            >
              {this.props.language === 'zh' ? "中文" : "English"}
            </Dropdown.Button>
            <Button.Group className={styles["button-group"]}>
              <Button onClick={() => history.push('signIn')}>{t("header.signin")}</Button>
              <Button onClick={() => history.push('register')}>{t("header.register")}</Button>
            </Button.Group>
          </div>
        </div>

        <Layout.Header className={styles["main-header"]}>
          <img src={logo} alt="" className={styles["App-logo"]}/>
          <Typography.Title level={3} className={styles.title}>{t("header.title")}</Typography.Title>
          <Input.Search placeholder="请输入旅游目的地、主题、或关键字" className={styles["search-input"]}/>
        </Layout.Header>
        <Menu mode={"horizontal"} className={styles["main-menu"]}>
          {
            menuList.map(item => {
              return  <Menu.Item key={item.key}>{t(`header.${item.name}`)}</Menu.Item>
            })
          }
        </Menu>
      </div>
    )
  }
}


export const Header = connect(mapStateToProps, mapDispatchToProps)(withTranslation()(withRouter(HeaderComponent)))